<!DOCTYPE html>
<html>
<head>
    <title>Gap and spacing</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.dataviz.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.dataviz.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    <div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart"></div>
    </div>
    <div class="configuration-horizontal">
        <div class="config-section">
            <span class="configHead">Gap</span>
            <ul class="options">
                <li>
                    <input id="gap" type="number" value="1.5" step="0.1" style="width: 60px;" />
                    <button id="getGap" class="k-button">Set gap</button
                </li>
            </ul>
        </div>
        <div class="config-section">
            <span class="configHead">Spacing</span>
            <ul class="options">
                <li>
                    <input id="spacing" type="number" value="0.4" step="0.1" style="width: 60px;" />
                    <button id="getSpacing" class="k-button">Set spacing</button>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors Stats /thousands/"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [{
                name: "Total Visits",
                data: [56000, 63000, 74000, 91000, 117000, 138000]
            }, {
                name: "Unique visitors",
                data: [52000, 34000, 23000, 48000, 67000, 83000]
            }],
            valueAxis: {
                line: {
                    visible: false
                }
            },
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "{0}"
            }
        });
    }

    $(document).ready(function () {
        setTimeout(function () {
            // Initialize the chart with a delay to make sure
            // the initial animation is visible
            createChart();
            $("#example").bind("kendo:skinChange", createChart);

            var chart = $("#chart").data("kendoChart"),
                firstSeries = chart.options.series;

            $("#getGap").click(function () {
                firstSeries[0].gap = parseFloat($("#gap").val(), 10);
                chart.redraw();
            });

            $("#getSpacing").click(function () {
                firstSeries[0].spacing = parseFloat($("#spacing").val(), 10);
                chart.redraw();
            });
        }, 400);

        if (kendo.ui.NumericTextBox) {
            $("#gap").kendoNumericTextBox();
            $("#spacing").kendoNumericTextBox();
        }
    });
</script>

<style scoped>
    .chart-wrapper, .chart-wrapper .k-chart {
        height: 300px;
    }
</style>

</body>
</html>
